<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/NEWS.css" />
<link rel="stylesheet" href="./icon/iconfont.css">
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/newspage.js" type="text/javascript" charset="utf-8"></script>

<body>
    <div id="top">
        <header class="clearfix">
            <div class="header_left">
                <div class="header_line"></div>
                <div class="header_one">
                    <ul>
                        <li class="music">
                            <i class="star"></i>
                            <audio src="./video/BGM.mp3" autoplay controls style="display: none;"></audio>
                        </li>
                        <li>
                            <a href="#"><img src="./images/yuanshen_logo.png" alt=""></a>
                        </li>
                        <li class="as home"><a href="#">首页</a></li>
                        <li class="as news selecta"><a href="#">新闻</a></li>
                        <li class="as Roles"><a href="#">角色</a></li>
                        <li class="as world"><a href="#">世界</a></li>
                        <li class="as manhua"><a href="#">漫画</a></li>
                        <li class="as shequ"><a href="#">社区</a></li>
                    </ul>
                </div>
            </div>
            <div class="header_right">
                <span>
                    <a href="#" class="User">登&nbsp录</a>
                    <img src="" alt="" class="iconfont icon-yonghu">
                </span>
            </div>
        </header>
    </div>

    <!-- 登录 -->
    <div class="Sing_big clearfix">
        <div class="sign_logo"><img src="./images/MIlogo.png" alt=""></div>
        <div class="Sign clearfix">
            <strong class="close_nav">X</strong>
            <ul>
                <li class="message">短信登录</li>
                <li class="password" style="color: black;">密码登录</li>
            </ul>
            <div class="xian"></div>
            <div class="sign_nav clearfix">
                <div class="message_nav">
                    <input type="text" name="" id="telephone" class="telephone" maxlength="11" placeholder="手机号登录/注册">
                    <p id="tel_x"></p>
                    <span></span>
                    <input type="text" name="" id="account" class="telephone" maxlength="4" placeholder="验证码">
                    <p id="account_x"></p>
                    <i class="shu">|</i>
                    <input type="button" name="" id="" class="Verification" value="获取验证码">
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
                <div class="password_nav">
                    <input type="text" name="" id="telephone" class="telephone" maxlength="11" placeholder="手机号/邮箱/用户名">
                    <p id="tel_x"></p>
                    <span></span>
                    <input type="password" name="" id="account" class="telephone" maxlength="4" placeholder="密码">
                    <p id="account_x"></p>
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section>

        <div class="body">

            <div class="box1 box" onclick="location='https://ys.mihoyo.com/main/news/detail/10696'">

                <div class="ppp"> <img src="https://ys.mihoyo.com/main/_nuxt/img/37207c1.jpg" class="pp"></div>
                <div class="recommend__title">「原素烘炉」多人游戏挑战活动玩法说明</div>
                <p><span>2020/10/11</span> <span>新闻</span></p>

            </div>

            <div class="box2 box" onclick="location='https://ys.mihoyo.com/main/news/detail/10605'">
                <div class="ppp"> <img src="https://ys.mihoyo.com/main/_nuxt/img/37207c1.jpg" class="pp"></div>

                <div class="recommend__title">《原神》App Store Today 推荐 - 「技术宅拯救世界！」</div>

                <p><span>2020/10/11</span> <span>新闻</span></p>
            </div>


            <div class="box3 box" onclick="location='https://ys.mihoyo.com/main/news/detail/10604'">
                <div class="ppp"> <img src="https://uploadstatic.mihoyo.com/contentweb/20201010/2020101019560593208.jpg"
                        width="390px" height="190px" class="pp"></div>
                <div class="recommend__title">10月11日原素烘炉活动说明</div>
                <br>
                <p><span>2020/10/11</span> <span>新闻</span></p>
            </div>













        </div>











    </section>


    <nav>

        <ul>

            <li>最新</li>
            <li>新闻</li>
            <li>公告</li>
            <li>活动</li>

        </ul>

    </nav>

    <article>
        <div onclick="location='https://ys.mihoyo.com/main/news/detail/10604'">
            <img src="https://ys.mihoyo.com/main/_nuxt/img/37207c1.jpg" class="coverFit">
            <span>《原神》「启程测试」充值返还规则说明</span>
            <div class="textbox">2020/09/15 &nbsp;&nbsp;&nbsp;&nbsp; <span class="textright">公告</span></div>
        </div>
        <div onclick="location='https://ys.mihoyo.com/main/news/detail/10605'">
            <img src="https://ys.mihoyo.com/main/_nuxt/img/37207c1.jpg" class="coverFit">
            <span>「原素烘炉」多人游戏挑战活动玩法说明</span>
            <div class="textbox">2020/09/15 &nbsp;&nbsp;&nbsp;&nbsp; <span class="textright2">新闻</span></div>
        </div>
        <div onclick="location='https://ys.mihoyo.com/main/news/detail/10696'">
            <img src="https://ys.mihoyo.com/main/_nuxt/img/37207c1.jpg" class="coverFit">
            <span>《原神》App Store Today 推荐 - 「技术宅拯救世界！」</span>
            <div class="textbox">2020/09/15 &nbsp;&nbsp;&nbsp;&nbsp; <span class="textright2">新闻</span></div>
        </div>
        <div onclick="location='https://ys.mihoyo.com/main/news/detail/10604'">
            <img src="https://uploadstatic.mihoyo.com/contentweb/20201010/2020101019560593208.jpg" class="coverFit">
            <span>10月11日原素烘炉活动说明</span>
            <div class="textbox">2020/09/15 &nbsp;&nbsp;&nbsp;&nbsp; <span class="textright2">新闻</span></div>
        </div>
        <div onclick="location='https://ys.mihoyo.com/main/news/detail/10605'">

            <img src="https://uploadstatic.mihoyo.com/contentweb/20201011/2020101101461049573.jpg" class="coverFit">
            <span>《原神》近期游戏内描述等问题修复调整说明</span>
            <div class="textbox">2020/09/15 &nbsp;&nbsp;&nbsp;&nbsp; <span class="textright2">新闻</span></div>
        </div>

    </article>



    <div class="addmore">
        <center>加载更多</center>

    </div>






    <!--  <div class="context">
	   
	   
	   </div>
 -->

    <footer class="footer">
        <ul class="footer_socialbar">
            <li class="footer_item weibo"></li>
            <li class="footer_item qq"></li>
            <li class="footer_item weixin"></li>
            <li class="footer_item share">
            </li>
        </ul>
        <div class="share_wrap">
            <p>分享至</p>
            <ul style="margin-left: 34px;">
                <li style="background-position: -74px -74px;"></li>
                <li style="background-position: -74px -10px;"></li>
                <li style="background-position: -138px -138px;"></li>
                <li style="background-position: -10px -138px;"></li>
            </ul>
        </div>
        <div id="footer_top">
            <div>
                <div class="mihoyo-cn-footer mihoyo-cn-footer-ys-mihoyo">
                    <div class="footer_content">
                        <div class="footer_logo">
                            <ul>
                                <li>
                                    <div style="display: flex; align-items: center;">
                                        <img src="./images/footer-mihoyo.png" style="width: auto;height: 42px;">
                                        <span></span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <img src="./images/footer-logo.png" style="width: 110px;height: auto;">
                                    </div>
                                </li>
                            </ul>


                        </div>
                        <div class="footer_info">
                            <div class="footer_link">
                                <div class="footer_protocol">
                                    <div>
                                        <a href="https://ys.mihoyo.com/company/agreement" class="protocol"
                                            target="_blank">用户协议</a>
                                        |
                                        <a href="https://ys.mihoyo.com/company/privacy" class="protocol"
                                            target="_blank">隐私政策</a>
                                        |
                                        <a href="https://jiazhang.mihoyo.com/#/" class="protocol"
                                            target="_blank">家长监护工程</a>
                                        |
                                        <a href="http://www.mihayou.com/company.html" target="_blank"
                                            class="about-us protocol">关于我们</a>
                                        |
                                        <a href="http://www.mihayou.com/contact.html" target="_blank"
                                            class="contract-us protocol">联系我们</a>
                                        |
                                        <a href="http://www.mihayou.com/add.html" target="_blank"
                                            class="join-us protocol">加入我们</a>

                                    </div>
                                </div>

                            </div>

                            <div class="footer_advice">
                                <p class="advice_info">
                                    健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                                </p>
                                <div class="inline_info">
                                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402001113"
                                        class="footer-filing-item" target="_blank">沪公网安备31010402001113号</a>
                                    <span class="split_line"> | </span>
                                    <span class="footer_filing_item">增值电信业务经营许可证：沪B2-20190555</span>
                                </div>

                            </div>

                            <div class="footer_filing">
                                <div class="footer_filing_content">
                                    <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
                                        class="footer-filing-item">沪ICP备19018275号-4</a>
                                    <span class="split_line"> | </span>
                                    <span> 沪网文〔2019〕3168-216号 </span>
                                    <span class="split_line"> | </span>
                                    <span>国新出审【2019】2978号</span>
                                </div>
                                <div class="footer_filing_tip">
                                    <span>互联网违法不良信息举报邮箱: tousu@mihoyo.com </span>
                                    <span>互联网违法不良信息举报电话: 021-34203135 （工作时间：每天10点 - 20点）</span>
                                </div>
                            </div>

                            <div class="footer-tip">
                                亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。
                            </div>

                            <div class="mihoyo-copyright">©2012-2020 上海米哈游影铁科技有限公司版权所有</div>

                            <div class="footer_icon">
                                <a href="https://v.yunaq.com/certificate?domain=www.mihoyo.com&amp;from=label&amp;code=90020"
                                    target="_blank"><img src="./images/footer-icon1.png" alt=""></a>
                                <a href="http://www.shjbzx.cn/" target="_blank"><img src="./images/footer-icon2.png"
                                        alt=""></a>
                                <a href="https://www.12377.cn/" target="_blank"><img src="./images/footer-icon3.png"
                                        alt=""></a>
                                <a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/8955A9DDE1FF8B6CE053010A14ACA87F"
                                    target="_blank"><img src="./images/footer-icon4.png" alt=""></a>
                                <a href="#" target="_blank"><img src="./images/footer-icon5.png" alt=""></a>
                                <a href="http://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020190314100540000004452331-SAIC_SHOW_310000-20200120150237277642&signData=MEYCIQCjn9IhIKfUHjPlx9W6xrYPZ4GA73Blopwp0iEzSX0OHQIhAOZm3tnlWLrgVXMtvgp5OibauIgiAa+2d+MQ7qzMIm6t"
                                    target="_blank"><img src="./images/footer-icon6.png" alt=""></a>

                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

    </footer>




    <div class="arrow">

        <a href="#top">
            <img src=""
                width="30px" height="30px">


        </a>
    </div>












</body>

</html>
<script>
    $(".home").click(function () {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function () {
            window.location.href = "Home.html";
        }, 5000)
    })

    $(".news").click(function () {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function () {
            window.location.href = "News.html";
        }, 5000)
    })


    $(".Roles").click(function () {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function () {
            window.location.href = "Role.html";
        }, 5000)
    })


    $(".world").click(function () {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function () {
            window.location.href = "World.html";
        }, 5000)
    })

    $(".manhua").click(function () {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function () {
            window.location.href = "manga_index.html";
        }, 5000)
    })
    $(".home").mousemove(function () {
        $(".header_line ").css("left", "460px")
    })

    $(".home").mouseout(function () {
        $(".header_line ").css("left", "545px")
    })
    $(".news").mousemove(function () {
        $(".header_line ").css("left", "545px")
    })

    $(".news").mouseout(function () {
        $(".header_line ").css("left", "545px")
    })


    $(".Roles").mousemove(function () {
        $(".header_line ").css("left", "630px")
    })

    $(".Roles").mouseout(function () {
        $(".header_line ").css("left", "545px")
    })


    $(".world").mousemove(function () {
        $(".header_line ").css("left", "715px")
    })

    $(".world").mouseout(function () {
        $(".header_line ").css("left", "545px")
    })


    $(".manhua").mousemove(function () {
        $(".header_line ").css("left", "802px")
    })

    $(".manhua").mouseout(function () {
        $(".header_line ").css("left", "545px")
    })

    $(".shequ").mousemove(function () {
        $(".header_line ").css("left", "888px")
    })

    $(".shequ").mouseout(function () {
        $(".header_line ").css("left", "545px")
    })

    var music = document.querySelector("audio");
    setTimeout(function () {
        music.play();
    }, 1000)
    $(document).ready(function () {
        music.play();
    })

    $(".music").click(function () {
        $(".music>i").toggleClass("stop");
        if (music.paused) {
            music.play();

        } else {
            music.pause();
        }
    })

    //登录触动变色
    $(".header_right span").mousemove(function () {
        $(".User").css("color", "white")
        $(".iconfont .icon-yonghu").css("color", "red")
    })

    $(".header_right span").mouseleave(function () {
        $(".User").css("color", "#ccc")
        $(".iconfont .icon-yonghu").css("color", "red")
    })


    // 线条移动
    $(".message").click(function () {
        $(".xian").css("left", "120px")
        $(".message_nav").show();
        $(".password_nav").hide();
        $(".message").css("color", " #ce965f")
        $(".password").css("color", "black")
    })

    $(".password").click(function () {
        $(".xian").css("left", "305px")
        $(".password_nav").show();
        $(".message_nav").hide();
        $(".password").css("color", " #ce965f")
        $(".message").css("color", "black")
    })


    //正则验证
    function phoneverification() {
        var phone = document.getElementById('telephone').value;
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            $("#telephone").css("color", "red")
            $(".message_nav>span").text("*手机格式错误");
            return false
        } else {
            $("#telephone").css("color", "black")
            $(".message_nav>span").text("");
            return false
        }

        if (phone == "") {
            $(".message_nav>span").text("*手机号不能为空");
            return false
        }
    }

    // 输入框点击时动画
    $("#telephone").focus(function () {
        $("#tel_x").css("width", "296px");
        $("#account_x").css("width", "0px");
        var phone = document.getElementById('telephone').value;

        phoneverification();

    })

    // 输入框点击时动画
    $("#account").focus(function () {
        $("#tel_x").css("width", "0px");
        Verification
        $("#account_x").css("width", "296px");
        var phone = document.getElementById('telephone').value;

        phoneverification();
    })


    //登录按钮
    $(".login").click(function () {
        phoneverification();
    })

    //获取验证码
    var count = 60;
    $(".Verification").click(function () {
        //正则验证
        var phone = document.getElementById('telephone').value;
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            $("#telephone").css("color", "red")
            $(".message_nav>span").text("*手机格式错误");
            return false
        } else {
            $("#telephone").css("color", "black")
            $(".message_nav>span").text("");
        }

        if (phone == "") {
            $(".message_nav>span").text("*手机号不能为空");
            return false
        }

        //倒计时
        $(".Verification").attr("disabled", "disabled"); //点击一次不可再点
        var interval = setInterval(function () { //定义定时器
            $(".Verification").val("已发送" + "(" + count + ")");
            count--;
            if (count == 0) {
                clearInterval(interval); //清除定时器
                $(".Verification").val("重新获取验证码");
                $(".Verification").removeAttr("disabled"); //删除这个属性
                count = 60;
            }
        }, 1000);
    })


    $(".User").click(function () {
        $(".Sing_big ").show();
    })
    $(".close_nav").click(function () {
        $(".Sing_big").hide();
    })


    $('.share_wrap').mouseover(function () {
        $('.share_wrap').show()
    }).mouseout(function () {
        $('.share_wrap').hide()
    })

    $('.share').mouseover(function () {
        $('.share_wrap').fadeIn()
    }).mouseout(function () {
        var flag = $('.share_wrap').show()
        if (!flag) {
            $('.share_wrap').hide()
        }
    })
</script>